<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('attributeMana.属性管理')" />
    <!-- <SearchCom
      :searchList="searchList"
      @search="handleSearch"
      @reset="handleReset"
    /> -->
    <div class="mt12 toolbar flex_aic" v-my-point="'skuAttribute:add'">
      <div class="addBtn flex_aic_jcc" @click="handleAdd()">
        <SvgIcon name="iconxinzeng" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ $t("attributeMana.新增属性") }}</span>
      </div>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      row-key="id"
      border
      v-loading="loading"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- <el-table-column label="序号" type="index" width="80" /> -->
      <el-table-column
        :label="$t('attributeMana.属性名称')"
        :prop="'name' + locale"
      />
      <el-table-column :label="$t('attributeMana.排序')" prop="sort" />
      <el-table-column :label="$t('attributeMana.操作')" width="300">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button
              type="text"
              @click="handleAddDetail(scope.row)"
              v-if="!scope.row.attributeId"
              v-my-point="'skuAttribute:add'"
              >{{ $t("attributeMana.添加属性值") }}</el-button
            >
            <el-button
              type="text"
              @click="handleEdit(scope.row)"
              v-my-point="'skuAttribute:edit'"
              >{{ $t("attributeMana.编辑") }}</el-button
            >
            <el-popconfirm
              :title="$t('attributeMana.确定删除吗')"
              @confirm="handleDelete(scope.row)"
              width="300px"
            >
              <template #reference>
                <el-button
                  type="text"
                  size="small"
                  v-my-point="'skuAttribute:del'"
                  >{{ $t("attributeMana.删除") }}</el-button
                >
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex_aic_jcc mt10 w-full">
      <el-pagination
        v-model="currentPage"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model:show="showEditDia" :data="editData" @refresh="refresh" />
    <EditDetailDia
      v-model:show="showEditDetailDia"
      :data="editDetailData"
      :parentAttributeId="parentAttributeId"
      @refresh="refreshParent"
    />
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import EditDia from "./editDia.vue";
import EditDetailDia from "./editDetailDia.vue";
import { ElMessage } from "element-plus";

const { t, locale } = useI18n();
const showEditDia = ref(false);
const editData = ref({});
const showEditDetailDia = ref(false);
const editDetailData = ref({});
const parentAttributeId = ref(0);
const tableRef = ref(null);
// const searchList = ref([
//   {
//     label: "属性名称",
//     key: "name",
//     type: "input",
//   },
// ]);

const fetchMessages = (params) => {
  console.log("params===", params);
  // 添加语言参数
  return Api.skuAttribute_list({
    ...params,
    ["name" + locale.value]: params.name,
  });
};

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(fetchMessages, {
  transformResponse: (data) => {
    return {
      content: data.content.map((item) => ({
        ...item,
        hasChildren: true,
      })),
      totalElements: data.totalElements,
    };
  },
});

const load = (row, treeNode, resolve) => {
  console.log("row===", row);
  Api.skuAttributeDetail_list({
    attributeId: row.id,
  }).then((res) => {
    console.log("res===", res);
    resolve(res.data.content || []);
  });
};
const handleAdd = () => {
  showEditDia.value = true;
  editData.value = {};
};

const handleEdit = (row) => {
  if (row.attributeId) {
    showEditDetailDia.value = true;
    editDetailData.value = row;
    parentAttributeId.value = row.attributeId;
    return;
  }
  editData.value = row;
  showEditDia.value = true;
};

const handleDelete = (row) => {
  Api[row.attributeId ? "skuAttributeDetail_delete" : "skuAttribute_delete"]([
    row.id,
  ]).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t("attributeMana.删除成功"));
      if (row.attributeId) {
        refreshParent(row.attributeId);
      } else {
        getDataList();
      }
    }
  });
};

const refresh = () => {
  currentPage.value = 1;
  getDataList();
};

const refreshParent = (pid) => {
  Api.skuAttributeDetail_list({
    attributeId: pid || parentAttributeId.value,
  }).then((res) => {
    nextTick(() => {
      tableRef.value.updateKeyChildren(
        pid || parentAttributeId.value,
        res.data.content || []
      );
    });
  });
};

const handleAddDetail = (row) => {
  showEditDetailDia.value = true;
  editDetailData.value = {};
  parentAttributeId.value = row.id;
};
</script>
<style lang="scss" scoped></style>
